import { FN } from "@Tea/model"
import { ElButton, ElDialog } from "element-plus"
import { Fragment, Ref } from "vue"

export type DialogConfigType = {
  loading?:Ref<boolean>,
  visible: Ref<boolean>,
  title?: string,
  width?:string,
  content:()=> JSX.Element,
  onConfirm?: FN,
  onClose?: FN,
  notUseFooter?: boolean,
  slot?: {
    header?: JSX.Element,
    bottom?: JSX.Element,
    left?: JSX.Element,
    center?: JSX.Element,
    right?:JSX.Element
  }
}

export const Dialog = (config: DialogConfigType) => {
  const onClose = () => {
    config?.onClose?.()
    config.visible.value = false
  }

  return (
    <ElDialog
      v-model={config.visible.value}
      title={config.title || ""}
      width={config.width || "50%"}
      draggable
      center
      close-on-click-modal={false}
      v-slots={{
        footer: () => (
         !config.notUseFooter && <span>
            {config?.slot?.left && config?.slot.left}
            <ElButton onClick={onClose}>取消</ElButton>
             {config?.slot?.center && config?.slot.center}
            <ElButton type="primary" onClick={() => config?.onConfirm()}>确定</ElButton>
             {config?.slot?.right && config?.slot.right}
          </span>
        ),
        default:() => (
          <Fragment>
            {config?.slot?.header}
            {config.content()}
            {config?.slot?.bottom}
          </Fragment>
        )
      }}
      onClose={onClose}
    >
    </ElDialog>
  )
}